<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :default-selected-keys="['0']">
        <a-menu-item key="0">
          <router-link to="/home">
            <a-icon type="user" />
            <span>不传参</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="1">
          <router-link to="/home/1">
            <a-icon type="user" />
            <span>静态传参</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <router-link to="/home/2/我是动态参数">
            <a-icon type="video-camera" />
            <span>动态传参</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="3">
          <router-link to="/home/3/我是动态参数">
            <a-icon type="upload" />
            <span>混合传参</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="4">
          <router-link to="/home/随便填">
            <a-icon type="upload" />
            <span>无页面</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        欢迎--{{ name }}--登录！恭喜{{ age }}岁，您的昵称为{{
          nickName
        }},网龄已经{{ ageIternet }}个月
        <a-button
          type="primary"
          @click="
            () => {
              setUserInfo();
            }
          "
          >修改用户信息</a-button
        >
        <a-button
          @click="
            () => {
              setTitle();
            }
          "
          >修改系统标题</a-button
        >
        <a-button
          @click="
            () => {
              setLogo();
            }
          "
          >影藏图标</a-button
        >
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
import { SET_TITLE, SET_LOGO, SET_USERINFO } from "@/types/mutation-types";
export default {
  data() {
    return {
      collapsed: false,
    };
  },
  computed: {
    //...mapState(["settings"]),//这样可以直接把模块里的setting所有state属性变成对象形式绑定在实例上
    ...mapGetters(["logo"]), //采用Getter获取状态
    ...mapState("settings", ["title"]), //采用mapState获取状态
    ...mapState("user", ["name", "nickName", "age", "ageIternet"]),
  },
  methods: {
    ...mapActions("user", [SET_USERINFO]), //采用mapActions获取Action方法
    ...mapMutations("settings", [SET_LOGO]), //采用mapMutations获取Mutations方法
    setTitle: function () {
      this.$store.dispatch("settings/" + SET_TITLE, { title: "设置系统" }); //直接store实例调用
    },
    setLogo: function () {
      this[SET_LOGO]({ logo: !this.logo });
    },
    setUserInfo: function () {
      this[SET_USERINFO]({
        name: "设置名称",
        age: "55",
        nickName: "设置名称",
        ageIternet: "44",
      });
    },
  },
};
</script>
<style>
#components-layout-demo-custom-trigger {
  height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
